<template>
	<view class="nav_content" :style="{'top': toNumber(statusBarHeight) + 54 + 'px'}">
		<view v-for="(items, index) in navList" :key="index" class="first_nav" @tap="jumpNav(items,index)">
			<navigator :url="items.url">
				<text>{{items.name}}</text>
			</navigator>
			<text class="txt_line" v-if="index != 0"></text>
			<image v-if="index < 2" class="close" src="/static/img/home/×.png"></image>
			<block v-if="items.type == 2 && currentIndex == index &&　items.isSelect">
				<view v-for="(item ,eindex) in items.list" :key="eindex" class="second_nav" >
				<navigator :url="item.url">	<image src="/static/img/weekly-right.png"></image>{{item.name}}</navigator>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name:"navList",
		props: {
			statusBarHeight: {
				type: String,
				default: function(e) {
					return ''
				}
			},
		},
		data() {
			return {
				currentIndex:0, //当前点开的第几个
				isShow:false, //是否显示
				navList:[{
					name:'首页',
					url:'/pages/home/home',
					type:1
				},{
					name:'学会概况',
					type:2,
					isSelect:false,
					list:[{
						name:'学会简介',
						url:'/pages/home/introduce'
					},{
						name:'学会章程',
						url:'/pages/home/rules'
					},{
						name:'理事名单',
						url:'/pages/home/namelist'
					},{
						name:'分支机构',
						url:'/pages/home/org'
					},{
						name:'省级学会',
						url:'/pages/home/association'
					},{
						name:'团体会员',
						url:'/pages/home/pteam'
					}]
				},{
					name:'资讯中心',
					url:'',
					type:1
				},{
					name:'学术交流',
					url:'',
					type:1
				},{
					name:'测绘智库',
					url:'',
					type:1
				},{
					name:'科普天地',
					url:'',
					type:1
				},{
					name:'活动管理',
					url:'/pages/activity/index',
					type:1
				},{
					name:'科技奖励',
					url:'',
					type:1
				}]
			};
		},
		
		methods:{
			jumpNav (param,index) {
				// 展开某一项
				if(param.type == 2) {
					this.currentIndex = index
					this.navList[index].isSelect = !this.navList[index].isSelect
				}
			},
			jumpSecond() {
				uni.navigateTo({
				    url:"/pages/home/edu"
				})
			}
		}
	}
</script>

<style lang="scss">
.nav_content {
	position: fixed;
	z-index: 100;
	width: 481upx;
	background: #165E8E;
	right: 0upx;
	top: 107upx;
	max-height: calc(100% - 308upx);
	overflow-y: scroll;
	overflow-x: hidden;
	z-index: 9999;
	.first_nav {
		position: relative;
		width: 481upx;
		background: rgba(22,94,142,0.25);
		border-bottom: 2upx solid rgba(255,255,255,0.25);
		
		text {
			display: block;
			width: 481upx;
			height: 106upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 38upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40upx;
			color: #FFFFFF;
			opacity: 1;
			
			&.txt_line {
				height: 106upx;
				width: 0 !important;
				opacity: 0.25;
				position: absolute;
				border-right: 2upx solid rgba(255,255,255,0.25);
				right: 106rpx;
				top: 0;
			}
			
		}
		
		.close {
			width: 17upx;
			height: 40upx;
			position: absolute;
			top: 37upx;
			right: 45upx;
		}
		
		&:last-child {
			border-bottom: 0;
		}
		
		.second_nav {
			width: 481upx;
			height: 106upx;
			background: rgba(0,72,120,0.25);
			border-bottom: 2upx solid rgba(255,255,255,0.25);
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 61upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40upx;
			color: #FFFFFF;
			opacity: 1;
			
			image {
				width: 11upx;
				height: 20upx;
				opacity: 0.2;
				margin-right: 17upx;
			}
			
			&:last-child {
				border-bottom: 0;
			}
		}
	}
}
</style>
